<script setup lang="ts">
  import { SingleSelectConfig } from '@/views/order/custom/hooks/types'
  import CustomInput from '@/views/order/custom/form/component-list/CustomInput.vue'
  import updateVisibleRuleModal from './update-visible-rule-modal.vue'
  import { ref } from 'vue'
  import { v4 as uuidv4 } from 'uuid'

  defineOptions({
    name: 'OrderCustomFormSingleSelectSetting',
  })

  const emits = defineEmits<{
    (e: 'change'): void
  }>()

  const props = defineProps({
    templateId: {
      type: String,
      required: true,
    },
  })

  const value = defineModel<SingleSelectConfig>('modelValue', { required: true })
  const updateVisibleRuleModalVisible = ref(false)

  const onSingleOptionAddClick = () => {
    value.value.options.push({
      label: `选项${value.value.options.length + 1}`,
      value: uuidv4(),
    })
    emits('change')
  }

  const handleSingleSelectOptionDelClick = (index: number) => {
    value.value.options.splice(index, 1)
    emits('change')
  }

  const handleUpdateVisibleRule = () => {
    updateVisibleRuleModalVisible.value = true
  }
</script>

<template>
  <div class="order-custom-form-single-select-setting">
    <div class="setting-item single-select">
      <div class="label">
        <div class="text">下拉单选选项</div>
        <h-link @click="onSingleOptionAddClick">添加选项</h-link>
      </div>
      <div class="value">
        <div
          v-for="(singleSelectOption, singleSelectOptionIndex) in value.options"
          :key="singleSelectOptionIndex"
          class="item"
        >
          <div class="input">
            <custom-input
              v-model="singleSelectOption.label"
              :placeholder="`请输入第${singleSelectOptionIndex + 1}个选项的名称`"
              @input="emits('change')"
            />
          </div>
          <h-link type="error" @click="handleSingleSelectOptionDelClick(singleSelectOptionIndex)"
            >删除</h-link
          >
        </div>
      </div>
    </div>

    <div class="setting-item">
      <div class="label">
        <div class="text">显隐规则</div>
      </div>
      <div class="set-visible-rule-btn" @click="handleUpdateVisibleRule">{{
        value.beControlVisibleRules.length <= 0 ? '设置显隐规则' : '已设置显隐规则'
      }}</div>
    </div>

    <update-visible-rule-modal
      v-model:visible="updateVisibleRuleModalVisible"
      v-model="value.beControlVisibleRules"
      :options="value.options"
      :template-id="props.templateId"
      @confirm="emits('change')"
    />
  </div>
</template>

<style scoped lang="scss">
  .order-custom-form-single-select-setting {
    display: flex;
    flex-direction: column;
    row-gap: 16px;

    .setting-item {
      display: flex;
      flex-direction: column;
      row-gap: 4px;

      .set-visible-rule-btn {
        width: 100%;
        height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #d7d9dc;
        cursor: pointer;
        border-radius: 2px;

        &:hover {
          border-color: #007cff;
          color: #007cff;
        }
      }
    }

    .single-select {
      .label {
        display: flex;
        column-gap: 12px;
      }

      .value {
        display: flex;
        flex-direction: column;
        row-gap: 8px;

        .item {
          display: flex;
          align-items: center;
          column-gap: 8px;

          .input {
            flex: 1;
          }
        }
      }
    }
  }
</style>
